<template>
    <view class="myInfo">
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <f-navbar :title="$t('pagetitle.usercenter')" fontColor="#fff" :bgColor="PrimaryColor" :scrollTop="scrollTop" navbarType='5' :isShowLeft="false" :isShowTransparentTitle="false"></f-navbar>
        <view class="headBox" :style="{background:'linear-gradient(to left top,'+PrimaryColor+','+freeSpecsButtonBackground+')',paddingTop:systemInfo.navBarH+'px'}">
            <!-- #ifdef MP -->
            <!-- 登录 -->
            <view class="u-flex u-p-l-30 u-p-r-20 u-p-t-30 u-p-b-30">
            	<block v-if="userInfo.token">
            		<view class="u-m-r-20">
                        <image class="avatar" mode="aspectFill" :src="userInfo.avatar_url || '/static/logo.png'"></image>
                    </view>
            		<view class="u-flex-1" @click="onJump('/pages/user/set')">
            			<view class="nickName u-flex">
                            <view class="name u-m-r-10" v-if="userInfo.nickname">{{userInfo.nickname}}</view>
                            <view class="placardVip">微信用户</view>
                        </view>
            			<!--view class="detail" v-if="userInfo.phoneNum">手机号：{{userInfo.phoneNum | phone}}</view>
                        <view class="detail" v-else>手机号:未设置</view-->
            		</view>
            	</block>
                <block v-else>
                	<view class="u-m-r-20">
                        <view class="avatar u-flex" style="justify-content: center;">
                            <u-icon name="account-fill" color="#fff" size="30"></u-icon>
                        </view>
                    </view>
                	<view class="u-flex-1" @click="openLogin">
                        <view class="u-font-lg" style="color: #fff;font-weight: bold;">{{$t('pls_login')}}</view>
                        <view class="detail">{{$t('desc_afterlogin')}}</view>
                    </view>
                </block>
            	<view><u-icon name="arrow-right" color="#fff" size="13"></u-icon></view>
            </view>
            <!-- #endif -->
            <!-- #ifndef MP -->
            <!-- 登录 -->
            <view class="u-flex u-p-l-30 u-p-r-20 u-p-t-30 u-p-b-30">
            	<block v-if="userInfo.token">
            		<view class="u-m-r-20">
                        <image class="avatar" mode="aspectFill" :src="userInfo.avatar_url"></image>
                    </view>
            		<view class="u-flex-1" @click="onJump('/pages/user/set')">
            			<view class="nickName">{{userInfo.showname}}</view>
            			<view class="detail" v-if="userInfo.phone!=''">{{$t('phone')}}：{{userInfo.phone | phone}}</view>
            			<view class="detail" v-else>{{$t('nophone')}}</view>
            			<!--view class="detail" v-if="userInfo.phone">手机号：{{userInfo.phone | phone}}</view>
            			<view class="detail" v-else>手机号:未留</view-->
            		</view>
            	</block>
                <block v-else>
                	<view class="u-m-r-20">
                        <view class="avatar u-flex" style="justify-content: center;">
                            <u-icon name="account-fill" color="#fff" size="30"></u-icon>
                        </view>
                    </view>
                	<view class="u-flex-1" @click="openLogin">
                        <view class="u-font-lg" style="color: #fff;font-weight: bold;">{{$t('title_loginreg')}}</view>
                        <view class="detail">{{$t('desc_afterlogin')}}</view>
                    </view>
                </block>
            	<view><u-icon name="arrow-right" color="#fff" size="13"></u-icon></view>
            </view>
            <!-- #endif -->
            <!-- 会员卡 -->
            <view class="vipBox">
                <view class="card" v-if="userInfo.is_sunline==0">
                    <view class="left">
                        <view class="title">{{$t('cardtip')}}</view>
                        <view class="tips">{{$t('desc_benefitsofvip')}}</view>
                    </view>
                    <view class="right">
                        <view class="button" @click="onTokenJump('/pages/user/team_register')">{{$t('jionteam')}}</view>
                    </view>
                </view>
                <view class="card" v-if="userInfo.is_sunline==1">
                    <view class="left">
                        <view class="title">{{userInfo.sunline_rankname}}</view>
                        <view class="tips">{{$t('desc_hellovip')}}</view>
                    </view>
                    <view class="right">
                        <view class="button" @click="$tools.goJump('/pagesPackageA/sales/center',{},!userInfo.token,'')">{{$t('salescenter')}}</view>
                    </view>
                </view>
            </view>
        </view>
        <view class="main">
            <view class="itemBox">
                <view class="titleBox u-flex">
                    <view class="title u-flex-m">{{$t('myorder')}}</view>
                    <view class="word" @click="$tools.goJump('/pagesPackageA/order/order',{},!userInfo.token,'')">{{$t('allorder')}}</view>
                    <u-icon name="arrow-right" :size="13" color="#999"></u-icon>
                </view>
                <u-grid :col="5" :border="false">
                    <u-grid-item v-for="(item,index) in order" :key="index">
                        <view class="u-flex u-p-t-30 u-p-b-30"
						 @click="$tools.goJump('/pagesPackageA/order/order',{},!userInfo.token,'')"
						style="flex-direction: column;justify-content: center;">
							<u-icon :name="item.icon" custom-prefix="iconfont" size="28" :color="PrimaryColor"></u-icon>
                            <view class="grid-text">{{item.word}}</view>
                        </view>
                    </u-grid-item>
                </u-grid>
            </view>
			<!--view  style="position: relative;"><chatMsgTip iconcolor="#63E5CB"></chatMsgTip></view-->
            <view class="itemBox">
                <view class="titleBox u-flex" style="border: none;padding-bottom: 0;">
                    <view class="title">{{$t('title_servies')}}</view>
                </view>
                <u-grid :col="5" :border="false">
					
                    <u-grid-item >
                        <view class="" style="justify-content: center;text-align: center;align-items: center; "
                              @click="$tools.goJump('/pagesPackageA/address/address',{},!userInfo.token,'')">
							<u--image src="/static/imgs/t1.png" width="40" height="40"></u--image>
                            <view class="grid-text">{{$t('shipaddress')}}</view>
                        </view>
                    </u-grid-item>
					

                    <u-grid-item >
                        <view class="" style="justify-content: center;text-align: center;align-items: center; "
                         @click="$tools.goJump('/pages/user/myfavorites',{},'','')">
							<u--image src="/static/imgs/t2.png" width="40" height="40"></u--image>
                            <view class="grid-text">{{$t('favorites')}}</view>
                        </view>
                    </u-grid-item>
					
					
                    <u-grid-item v-if="userInfo.is_sunline==1">
                        <view class="dddd" style="justify-content: center;text-align: center;align-items: center; "
                         @click="$tools.goJump('/pages/user/team_list',{},!userInfo.token,'')">
							<u--image src="/static/imgs/t4.png" width="40" height="40"></u--image>
                            <view class="grid-text dddd">{{$t('我的团队')}}</view>
                        </view>
                    </u-grid-item>
                    <u-grid-item v-else>
                        <view class="dddd" style="justify-content: center;text-align: center;align-items: center; "
                         @click="$tools.goJump('/pages/user/team_register',{},!userInfo.token,'')">
							<u--image src="/static/imgs/t4.png" width="40" height="40"></u--image>
                            <view class="grid-text dddd">{{$t('加入团队')}}</view>
                        </view>
                    </u-grid-item>
					
                    <u-grid-item >
                        <view class="u-flex u-p-t-30 u-p-b-30" style="position: relative;flex-direction: column;justify-content: center;">
							<u--image :src="'/static/imgs/t3.png'" width="40" height="40" @click="$tools.goJump('/pagesPackageA/chat/chathome',{},'','switchTab')"></u--image>
                            <view class="grid-text" style="color: #666;font-size: 22rpx;">
							{{$t('在线客服')}}
							<u-badge :type="msgnum>0?'error':'success'" :value="msgnum" :offset="[5,-5]" :absolute="true" :showZero="true"></u-badge>
							</view>
                            <!-- #ifdef MP-WEIXIN -->
                            <button style="opacity: 0;width: 100%;height: 100%;position: absolute;left: 0;top: 0;" :open-type="'contact'"></button>
                            <!-- #endif -->
                        </view>
                    </u-grid-item>
					
                    <u-grid-item >
                        <view class="u-flex u-p-t-30 u-p-b-30"
						 style="position: relative;flex-direction: column;justify-content: center;"
						@tap="$tools.goJump('/pagesPackageA/info/view_accord',{id:'',unique:'about'+lang},0,'')">
							<u--image :src="'/static/imgs/t5.png'" width="40" height="40"></u--image>
                            <view class="grid-text" style="color: #666;font-size: 22rpx;">{{$t('aboutus')}}</view>
                        </view>
                    </u-grid-item>
					
                </u-grid>
            </view>
        </view>
		
			<view v-if="shoplist.length>0">
                <view class="u-font-32 u-font-bold u-padding-20 u-m-t-20">店铺形态展示</view>				
					<view v-for="(item, index) in shoplist" :key="index">
						<view class="news">
							<view class="" @click="$tools.goJump('/pages/goods/shop',{id:item.shop_id})">
								<view class="title u-type-primary-dark u-font-lg" v-if="item.shop_name!=''">{{item.shop_name}}</view>
								<view class="newspic" :style="'background:url('+item.cover_url+') no-repeat bottom center;background-size: cover;'"></view>
								<!--view class=" font-weight-bold u-m-t-10 u-type-error-dark">{{item.shop_name}}</view-->
							</view>
						</view>
						<view class="b-b  u-m-t-4 u-m-b-10"></view>
					</view>
			</view>
		
		<view class="u-flex u-flex-middle u-m-t-30 u-m-b-10" style="line-height: 70rpx; color: #888888;">
			<select-language></select-language> <span class="u-p-l-10 u-p-r-10">|</span>
			<select-bid></select-bid>
        </view>	
		
        <!--f-tabbar></f-tabbar-->
    </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import base from '@/config/baseUrl';
import store from '@/store';
import fNavbar from '@/components/module/f-navbar/f-navbar';
import selectLanguage from '@/components/selectlanguage';
import selectBid from '@/components/selectbid';
//import fTabbar from '@/components/module/f-tabbar/f-tabbar';

import { api_getUserinfo,api_shopList } from '@/config/api.js';
export default {
    components:{
        fNavbar,selectLanguage,selectBid
    },
	computed:{
	    ...mapState(['PrimaryColor','userInfo']),
		freeSpecsButtonBackground(){
			return this.$u.colorToRgba(this.$u.rgbToHex(this.PrimaryColor),0.75)
		},
	},
    data() {
        return {
            baseUrl:base.baseUrl,
            systemInfo:base.systemInfo,
            scrollTop:0,
			msgnum:0,
            // 订单
            order: [{
                icon: 'dingdandaifukuan',
                word: this.$t('tobepaid')
            }, {
                icon: 'f1',
                word: this.$t('tobedelivered')
            }, {
                icon: 'shouhuo',
                word: this.$t('tobereceived')
            }, {
                icon: 'pingjia',
                word: this.$t('tobeaccept')
            }, {
                icon: 'shouhou',
                word: this.$t('ordersales')
            }],
			shoplist:[]
        }
		
    },
    onLoad() {
		if (this.userInfo.token){
			//更新用户信息，很有必要即时

			this.$store.dispatch("getUserInfo",{member_id:this.userInfo.member_id}).then(rs=>{
				console.log(rs)
				if(rs==false){
					this.emptyUserInfo();
					this.$tools.goJump('/pages/my/myInfo',{},'','launch')
				}
			});
			
		}
		uni.setNavigationBarTitle({title: this.$t('pagetitle.usercenter')});
		this.getShopList()
		//console.log(store.state.chatScenesInfo,'scene--存储参数')
        //uni.hideTabBar();// 隐藏原生的tabbar
		//api_getUserinfo({}).then((res) => {}).catch((err) =>{})
    },
    methods: {
        ...mapMutations(['emptyUserInfo','setLoginPopupShow']),
        onJump(url){
            uni.navigateTo({
                url:url
            })
        },
		getShopList(){
			api_shopList({params: {},  custom: {isFactory:false}}).then((res) => {
				console.log(res.data.list)
				this.shoplist=res.data.list
			}).catch((err) =>{})
		},
        // 跳转前判断登录
        onTokenJump(url) {
        	this.judgeLogin(() => {
        		uni.navigateTo({
        			url: url
        		});
        	});
        },
        openLogin(){
            this.judgeLogin()
        },
        navClick(e){
            if(e.word=='客服帮助'){
            // #ifdef MP
				return
            // #endif
            }
			this.$tools.goJump(e.onPlate,{},e.auth,'')
        },
    },
    onPageScroll(e) {
    	this.scrollTop = e.scrollTop;
    },
}
</script>

<style lang="scss" scoped>
page {
    background-color: #f5f5f5;
}

.headBox {
    padding-top: 128rpx;
    background: linear-gradient(to left top, #f32735, #fc674d);
    border-radius: 50% / 0 0 5% 5%;
    overflow: hidden;
    .avatar{
        width: 50px;
        height: 50px;
        border-radius: 25px;
        background-color: #ccc;
    }
    .nickName{
        .btn{
            font-size: 22rpx;
            font-weight: normal;
            color: #666;
            background: #fff;
            border-radius: 5rpx;
            height: 45rpx;
            line-height: 45rpx;
            padding: 0 10rpx;
            position: relative;
            .itemButton{
                border-radius: 0;
                text-align: left;
                opacity: 0;
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
            }
        }
        .name{
            color: #fff;
            font-weight: bold;
            font-size: 32rpx;
        }
        .placardVip{
            background: #2a2e44;
            color: #f4d6a1;
            font-size: 22rpx;
            padding: 4rpx 10rpx;
            text-align: center;
            border-radius: 4rpx;
        }
        
    }
    .detail{
        color: #fff;
        font-size: 24rpx;
        padding-top: 6rpx;
    }
    .vipBox {
        padding: 0 24rpx;
        .card {
            background-image: linear-gradient(to right, #314177, #202646);
            padding: 16rpx 32rpx 24rpx 32rpx;
            border-top-left-radius: 30rpx;
            border-top-right-radius: 30rpx;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            .left {
                display: flex;
                flex-direction: row;
                align-items: center;
                .title {
                    font-size: 40rpx;
                    font-weight: bold;
                    font-style: italic;
                    color: #f9bd90;
                }
                .tips {
                    font-size: 24rpx;
                    color: #f9bd90;
                    margin-left: 20rpx;
                }
                
            }
            .right {
                .button {
                    padding: 8rpx 16rpx;
                    color: 212849;
                    border-radius: 30rpx;
                    background: #f9bd90;
                    font-size: 24rpx;
                }
            }
        }
    }
}
.main {
    padding: 0 24rpx;
}

.itemBox {
    background: #fff;
    padding: 0 24rpx;
    border-radius: 20rpx;
    overflow: hidden;
    margin-top: 24rpx;
    .titleBox {
        padding: 32rpx 0;
        border-bottom: 1rpx solid #eee;
        .title {
            font-size: 28rpx;
            font-weight: bold;
        }
        .word {
            font-size: 24rpx;
            color: #999;
        }
    }
    .grid-text{
        font-size: 24rpx;
        color: #333;
        padding-top: 10rpx;
    }
}
	.news{
		border: solid 0px #EAEEF1;
		border-radius: 0rpx;
		padding: 20rpx;
		.newspic{
			width: 100%;
			height:380rpx;
			border-radius: 12rpx;
		}
		.title{
			padding-bottom: 10rpx;
			font-weight: bold; font-style: normal;
		}
	}
</style>
